<template>
  <layout-body>
    <div>
      <el-button
        type="primary"
        v-permission="'store-diy_page-create'"
        @click="createClick(0)"
      >
        <el-icon><Plus /></el-icon>
        添加页面
      </el-button>
    </div>

    <!-- 列表 -->
    <el-table class="mt20" :data="lists" row-key="id" v-loading="initLoading">
      <el-table-column label="页面名称" prop="page_name">
        <template #default="scope">
          <span>{{ scope.row.page_name }}</span>

          <template v-if="scope.row.is_home">
            <el-tag type="error" class="ml5" size="small">首页</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="create_time">
        <template #default="scope">
          <span class="text-grey fz12">{{ scope.row.create_time }}</span>
        </template></el-table-column
      >
      <el-table-column align="center" label="操作" width="200">
        <template #default="scope">
          <div class="flex end">
            <template v-if="!scope.row.is_home">
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="不用了"
                icon="WarningFilled"
                icon-color="red"
                title="确定要设为首页吗？"
                @confirm="onSelectedHome(scope.row.id)"
              >
                <template #reference>
                  <el-button
                    link
                    v-permission="'store-diy_page-update'"
                    type="primary"
                    >设置为首页</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
            <el-button
              link
              type="primary"
              @click="createClick(scope.row.id)"
              v-permission="'store-diy_page-update'"
              >编辑</el-button
            >
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="不用了"
              icon="WarningFilled"
              icon-color="red"
              title="确定删除吗？"
              @confirm="del(scope.row.id)"
            >
              <template #reference>
                <el-button
                  link
                  v-permission="'store-diy_page-delete'"
                  type="primary"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="flex end">
      <page :listPage="listPage" @change="pageChange"></page>
    </div>
  </layout-body>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted } from "vue";

import {
  getDiyPageList,
  delDiyPage,
  selectedDiyPageHome,
} from "@/api/store/diy_page";
import { listPageType, Result, ResultError } from "@/types";
import router from "@/router";
import { useConfig } from "@/store";

const configStore = useConfig();

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const createClick = (id: number) => {
  router.push({
    path: "/store/diy/page/create",
    query: {
      id,
    },
  });
};

const initLoading = ref<boolean>(true);

const lists = ref<any>([]);

const listPage = ref<listPageType>({
  total: 0,
  limit: configStore.getPageLimit,
  page: 1,
});

const toInit = () => {
  let obj: any = {};
  obj.page = listPage.value.page;
  obj.limit = listPage.value.limit;
  initLoading.value = true;
  getDiyPageList(obj)
    .then((res: Result) => {
      lists.value = res.data.data;
      listPage.value.total = res.data.total;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      initLoading.value = false;
      $utils.errorMsg(err);
    });
};

const pageChange = (res: listPageType) => {
  listPage.value = res;
  toInit();
};

const del = (id: number) => {
  delDiyPage({
    id,
  })
    .then((res: Result) => {
      toInit();
      $utils.successMsg(res.message);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

// 设置为首页
const onSelectedHome = (id: number) => {
  selectedDiyPageHome({
    id,
  })
    .then((res: Result) => {
      toInit();
      $utils.successMsg(res.message);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

onMounted(() => {
  toInit();
});
</script>